<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'PieChart',
})
export default class PieChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            // tooltip: {
            //     trigger: 'item',
            // },
            legend: {
                bottom: 'bottom',
                selectedMode: false,
            },
            label: {
                formatter: '{c}条',
                color: '#333',
                fontSize: 16,
                // fontWeight: 700,
            },
            series: [
                {
                    type: 'pie',
                    radius: ['35%', '55%'],
                    avoidLabelOverlap: true,
                    // data: [
                    //     { value: 50, name: '超3天未反馈' },
                    //     { value: 50, name: '80%调整期' },
                    //     { value: 100, name: '距调整期2日' },
                    // ],
                    itemStyle: {
                        normal: {
                            color: function (colors) {
                                var colorList = ['#feb580', '#3c7786', '#99c39c', '#ef6567', '#f9c956', '#3BA272'];
                                return colorList[colors.dataIndex];
                            },
                        },
                    },
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            // xAxis: { data: e.xAxisData },
            series: { data: e },
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
